<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="胡爱静">
    <title></title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        nav {
            width: 100%;
            height: 50px;
            background-color: lightgray;
            z-index: 2;
        }

        .header {
            display: flex;
            justify-content: space-around;
            width: 600px;
            height: 50px;
            line-height: 50px;
            margin: 0 auto;
            background-color: #999;
        }

        .header>li>a.color {
            color: red;
            text-decoration: none;
        }
        .header li{
            position: relative;
        }
        .inner {
            width: 100px;
            border: 1px solid black;
            text-align: center;
            margin-left: -15px;  
            margin-top: -5px;
            position: absolute;
            z-index: -1;
            display: none; 
        }
         .inner>li>a.color {
            color: red;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <nav>
        <ul class="header">
            <li><a href="">公司简介</a>
                <ul class="inner">
                    <li><a href="">公司概况</a></li>
                    <li><a href="">公司概况</a></li>
                    <li><a href="">公司概况</a></li>
                </ul>
            </li>
            <li><a href="">产品介绍</a>
                <ul class="inner">
                    <li><a href="">公司概况</a></li>
                    <li><a href="">公司概况</a></li>
                    <li><a href="">公司概况</a></li>
                </ul>
            </li>
            <li><a href="">联系我们</a>
                <ul class="inner">
                    <li><a href="">公司概况</a></li>
                    <li><a href="">公司概况</a></li>
                    <li><a href="">公司概况</a></li>
                </ul>
            </li>
            <li><a href="">人才招聘</a>
                <ul class="inner">
                    <li><a href="">人才招聘</a></li>
                    <li><a href="">人才招聘</a></li>
                    <li><a href="">人才招聘</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $('.header>li').hover(function () {
        $(this).find('.inner').show();
    },function(){
        $('.inner').hide();
    });

$('.header>li>a').hover(function(){
      $(this).addClass('color');
},function(){
     $(this).removeClass('color');
});
    $('.inner>li>a').hover(function(){
      $(this).addClass('color');
    },function(){
     $(this).removeClass('color');
    });

</script>